<template>
  <div class="sku" v-if="$store.state.showAddCart">
    <div class="box">
      <van-icon name="cross" @click="closeAddCart" />
      <div class="good-info">
        <div class="info-l">
          <img :src="info.list_pic_url" alt="" />
        </div>
        <div class="info-r">
          <p>价格：{{ info.retail_price | price }}</p>
          <p>库存：{{ info.goods_number }}</p>
        </div>
      </div>
      <div class="num">
        <p>数量：</p>
        <van-stepper
          @change="changeNum"
          v-model="$store.state.goodsNum"
          :max="info.goods_number"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      value: "",
    }
  },
  methods: {
    closeAddCart() {
      this.$store.commit("changeShowAddCart", false)
      this.$store.commit("changeGoodsNum", 1)
    },
    changeNum(val) {
      this.$store.commit("changeGoodsNum", val)
    },
  },
}
</script>

<style lang="less" scoped>
.sku {
  width: 100vw;
  height: calc(100vh - 50px);
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 5;
  top: 0;
  .box {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    .van-icon {
      position: absolute;
      right: 10px;
      top: 10px;
    }
    .good-info {
      display: flex;
      .info-l {
        width: 25vw;
        img {
          width: 100%;
        }
      }
      .info-r {
      }
    }
    .num {
      /deep/.van-stepper__input {
        width: 28vw;
      }
    }
  }
}
</style>
